<template>
  <div class="filter">
    <t-drawer
      size="695px"
      :visible.sync="visible"
      :closeBtn="false"
      @confirm="handleConfirm"
      :close-on-overlay-click="false"
    >
      <template #header>
        <div class="drawer-head" @click="close">
          <p class="chevron-left">
            <icon-font name="chevron-left" size="18px" />
          </p>
          <h3>{{header}}</h3>
        </div>
      </template>
      <t-form :data="formData" :rules="rules" ref="form" label-align="top" @submit="onSubmit">
        <t-form-item label="头像" name="avatar">
          <upload-img module="user" :value="formData.avatar ? [{url: formData.avatar}] : []" @success="handleSuccess"></upload-img>
        </t-form-item>
        <t-form-item label="用户手机" name="phone">
          <t-input v-model="formData.phone" :maxlength="11" placeholder="请输入用户手机"></t-input>
        </t-form-item>
        <t-form-item label="用户姓名" name="real_name">
          <t-input v-model="formData.real_name" placeholder="请输入用户姓名"></t-input>
        </t-form-item>
        <t-form-item label="用户账号" name="user_name">
          <t-input v-model="formData.user_name" placeholder="请输入用户账号"></t-input>
        </t-form-item>
        <t-form-item label="用户邮箱" name="mailbox">
          <t-input v-model="formData.mailbox" placeholder="请输入用户邮箱"></t-input>
        </t-form-item>
        <t-form-item label="允许登录" name="is_login">
          <t-switch v-model="formData.is_login" :custom-value="[1, 0]" :label="['允许', '禁止']"></t-switch>
        </t-form-item>
        <t-form-item label="状态" name="status">
          <t-radio-group v-model="formData.status" :options="statusOptions"></t-radio-group>
        </t-form-item>
      </t-form>
    </t-drawer>
  </div>
</template>

<script>
import { IconFont } from "tdesign-icons-vue";
import UploadImg from "@/components/upload-img/index.vue";
import {userCreateApi, userDetailApi, userEditApi} from "@/api/user";

export default {
  name: 'StaffAdd',
  components: {IconFont, UploadImg},
  data() {
    return {
      visible: false,
      header: '新增用户',
      formData: {
        avatar: '', // 头像
        phone: '', // 手机
        user_name: '', // 账号
        mailbox: '', // 邮箱
        real_name: '', // 姓名
        is_login: 1, // 是否登录 （0禁止；1允许）
        status: 1, // 状态
      },
      rules: {
        //avatar: [{required: true, message: '请上传头像', trigger: 'change'},],
        phone: [{required: true, message: '请输入手机号', trigger: 'blur'},],
        //user_name: [{required: true, message: '请输入账号', trigger: 'blur'},],
        //mailbox: [{required: true, message: '请输入邮箱', trigger: 'blur'},],
        //real_name: [{required: true, message: '请输入姓名', trigger: 'blur'},],
        is_login: [{required: true, message: '请选择是否登录', trigger: 'change'},],
        status: [{required: true, message: '请选择状态', trigger: 'change'},],
      },
      statusOptions: [
        // -1 黑户；0 待审；1 已审
        {label: '已审', value: 1},
        {label: '待审', value: 0},
        {label: '黑户', value: -1},
      ],
      type: 'add',
      editId: '',
    }
  },
  methods: {
    // 上传头像
    handleSuccess(value) {
      console.log('value', value)
      this.formData.avatar = value.response.url
      console.log('formData.avatar', this.formData.avatar)
    },
    // 确认
    handleConfirm() {
      this.$refs.form.submit()
    },
    onSubmit({ validateResult, firstError }) {
      if (validateResult === true) {
        this.handleSubmit()
      } else {
        this.$message.warning(firstError);
      }
    },
    handleSubmit() {
      const request = this.type === 'edit' ? userEditApi : userCreateApi
      request(this.formData).then(res=> {
        this.$message.success(res.retmsg)
        this.close()
        this.$emit('refresh')
      }).catch(err=> {
        console.log(err)
      })
    },
    getDetail() {
      userDetailApi({id: this.editId}).then(res=> {
        const { data } = res
        this.formData = {
          avatar: res.data.avatar, // 头像
          phone: res.data.phone, // 手机
          user_name: res.data.user_name, // 账号
          mailbox: res.data.mailbox, // 邮箱
          real_name: res.data.real_name, // 姓名
          is_login: res.data.is_login, // 是否登录 （0禁止；1允许）
          status: res.data.status, // 状态
        }
        if (this.type === 'edit') {
          this.formData.id = data.id
          this.header = '编辑用户'
        }

        console.log('formData', this.formData)
      }).catch(err=> {
        console.log('err', err)
      })
    },
    open(type, data={}) {
      this.editId = data.id
      this.type = type
      this.header = '新增用户'
      if (this.type === 'add') {
        this.formData = {
          avatar: '', // 头像
          phone: '', // 手机
          user_name: '', // 账号
          mailbox: '', // 邮箱
          real_name: '', // 姓名
          is_login: 1, // 是否登录 （0禁止；1允许）
          status: 1, // 状态
        }
      } else if (this.type === 'edit' || this.type === 'copy') {
        this.getDetail()
      }
      this.visible = true
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>

</style>
